
<!--
 * @Author: ljc
 * @Date: 2023-04-27 17:11:02
 * @LastEditors: g05047
 * @LastEditTime: 2023-05-09 19:18:45
 * @Description: 分配项目
-->
<template>
  <div class="proj-main">
    <div class="proj-left">
      <rk-grid ref="notAssignRef"
        title="待指派项目列表"
        dataUrl="/reviewtask/notAssignApplyPage"
        boxConfig
        :params="notAssignQueryParams"
        :columns="tableColumns"
        :responseHandle="(tableData)=>{
          addTableData.forEach((item)=>{
            var index = tableData.findIndex(subItem => subItem.applyId === item.applyId)
            if (index != -1) {
              tableData.splice(index,1)
            } 
          })
          return tableData
        }">
        <template #toolbar_title_buttons>
          <el-input v-model="notAssignQueryParams.projectName"
            placeholder="请输入项目名称"
            class="mr-15px w-200px"
            clearable
            @click="handleSearch">
          </el-input>
          <el-input v-model="notAssignQueryParams.adCode"
            class="mr-15px w-200px"
            clearable
            @click="handleSearch">
          </el-input>
        </template>
      </rk-grid>
    </div>
    <div class="proj-center">
      <div>
        <el-button @click="handleMove('up')">上移</el-button>
      </div>
      <div>
        <el-button @click="handleMove('down')">下移</el-button>
      </div>
    </div>
    <div class="proj-right">
      <rk-grid ref="assignRef"
        title="已指派项目列表"
        dataUrl='/reviewtask/assignApplyPage'
        boxConfig
        :params="assignQueryParams"
        :columns="tableColumns"
        :responseHandle="(tableData)=>{
          delTableData.forEach((item)=>{
            var index = tableData.findIndex(subItem => subItem.applyId === item.applyId)
            if (index != -1) {
              tableData.splice(index,1)
            } 
          })
          return tableData
        }">
        <template #toolbar_title_buttons>
          <el-input v-model="assignQueryParams.projectName"
            placeholder="请输入项目名称"
            class="mr-15px w-200px"
            clearable
            @click="handleSearch">
          </el-input>
          <el-input v-model="assignQueryParams.adCode"
            class="mr-15px w-200px"
            clearable
            @click="handleSearch">
          </el-input>
        </template>
      </rk-grid>
    </div>
  </div>
</template>
<script setup>
import { forEach } from "min-dash"
import IsUtils from '@/utils/is-utils.js'
import { ref, watch } from "vue"
import XEUtils from 'xe-utils'

const props = defineProps({
  taskDetaileData: { type: [Object], default: () => ({}) },
  type: {
    type: [String, Number],
    default: 0
  }
})
const isAdd = ref(false)
const addTableData = ref([])
const delTableData = ref([])
// 未分配查询参数
let notAssignQueryParams = reactive({
  projectName: undefined,
  adCode: '2300',
  taskId: undefined,
  type: undefined
})
// 已分配查询参数
let assignQueryParams = reactive({
  projectName: undefined,
  adCode: '2300',
  taskId: 111111111
})
const notAssignRef = ref(null)
const assignRef = ref(null)
watch(
  () => props.taskDetaileData,
  (newValue, oldValue) => {
    nextTick(() => {
      if (!XEUtils.isEmpty(newValue)) {
        isAdd.value = false
        assignQueryParams.taskId = newValue.value.taskId
        notAssignQueryParams.type = newValue.value.type
      } else {
        isAdd.value = true
        assignQueryParams.taskId = 111111111
        notAssignQueryParams.taskId = undefined
      }
    })
  },
  { deep: true, immediate: true }
)
watch(() => props.type, (newValue) => {
  if (newValue) {
    notAssignQueryParams.type = newValue
  }
}, { deep: true, immediate: true })
const tableColumns = ref([
  { field: 'adName', title: '地区', width: 250, align: 'left', },
  {
    field: 'agencyName', title: '单位名称', width: 250, align: 'left',
  },
  { field: 'proCode', title: '项目编码', width: 250, align: 'left', },
  { field: 'proName', title: '项目名称', width: 250, align: 'left', },
  { field: 'setupYear', title: '立项年度', width: 120, align: 'center', },
  { field: 'fundInvestAreaName', title: '资金投向领域', width: 250, align: 'left', },
  { field: 'startDate', title: '开工日期', width: 120, align: 'center', },
  { field: 'endDate', title: '竣工日期', width: 120, align: 'center', },
  {
    field: 'applyAmt',
    title: '申报金额',
    formatter: 'formatThousand',
    width: 200,
    align: 'right'
  },
  {
    field: 'totalBudget',
    title: '项目总概算',
    formatter: 'formatThousand',
    width: 200,
    align: 'right'
  },
  {
    field: 'proCapital',
    title: '项目资本金',
    formatter: 'formatThousand',
    width: 200,
    align: 'right'
  },
  { field: 'remark', title: '备注', width: 250, align: 'left', },
])
/**查询 */
const handleSearch = () => {

}
/**上移和下移方法 */
const handleMove = (type) => {
  if (type === 'up') {//上移
    const seleRows = assignRef.value.getCheckboxRecords()
    handleAddRows(notAssignRef, seleRows)
    handleDelRows(assignRef)
    handleGetAssignData(type, seleRows)
  } else if (type === 'down') {// 下移
    const seleRows = notAssignRef.value.getCheckboxRecords()
    handleAddRows(assignRef, seleRows)
    handleDelRows(notAssignRef)
    handleGetAssignData(type, seleRows)
  }
}
// 添加内容
const handleAddRows = (ref, array) => {
  if (array.length) {
    const data = ref.value.getTableData()
    const tableData = data.tableData
    array.forEach(async element => {
      if (!IsUtils.isInclude(tableData, element.applyId)) {
        await ref.value.insertAt(element)
      }
    });
  }
}
// 删除内容
const handleDelRows = async (ref) => {
  await ref.value.removeCheckboxRow()
}
// 获取已经分配项目数据
const handleGetAssignData = (type, array) => {
  if (array.length) {
    array.forEach(async element => {
      if (type === 'up') { // 上移
        if (!IsUtils.isInclude(delTableData.value, element.applyId)) {
          delTableData.value.push(element)
        }
      } else if (type === 'down') { // 下移
        if (!IsUtils.isInclude(addTableData.value, element.applyId)) {
          addTableData.value.push(element)
        }
      }
    });
  }
}

/**获取数据 */
const getProjectData = () => {
  let isVailde = true
  return { addTableData: addTableData.value, delTableData: delTableData.value, isVailde }
}
// 对外暴露方法
defineExpose({
  getProjectData
})
</script>
 <style lang="scss" scoped>
.proj-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .proj-left {
    flex: 1;
    height: 0;
  }
  .proj-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    div {
      text-align: center;
      margin: 20px;
      .el-button {
        width: 100%;
        padding: 20px;
      }
    }
  }
  .proj-right {
    flex: 1;
    height: 0;
  }
}
</style>